<script>
import {nanoid} from 'nanoid'
import {mapState} from 'vuex'
export default {
  name: "Person",
  methods: {
    addPerson() {
      const p = {
        id: nanoid(),
        name: this.name
      }
      this.$store.commit('personAbout/ADD_PERSON', p)
      console.log(p)
      this.name = ''
    },
    addPersonWang() {
      const p = {
        id: nanoid(),
        name: this.name
      }
      this.$store.dispatch('personAbout/addPersonWang',p)
    },
    addPersonRandom() {
      this.$store.dispatch('personAbout/addPersonServer')
    }
  },
  computed: {
    personList() {
      return this.$store.state.personAbout.personList
    },
    sum() {
      return this.$store.state.countAbout.sum
    },
    firstPersonName() {
      return this.$store.getters["personAbout/firstPersonName"]
    },
  },
  data() {
    return {
      name: ''
    }
  }
}
</script>

<template>
<div>
  <h3 style="color: red">Count组件的求和为:{{sum}}</h3>
  <input v-model="name" type="text" placeholder="请输入名字">
  <button @click="addPerson">添加</button>
  <button @click="addPersonWang">添加姓王的人</button>
  <button @click="addPersonRandom">添加随机人</button>
  <br/>
  <ul>
    <li v-for="p in personList" :key="p.id">{{p.name}}</li>
  </ul>

  <h3>列表中第一个人的名字：{{firstPersonName}}</h3>
</div>
</template>

<style scoped>

</style>